<template>
    <view class="container">
        <view class="content">
            <!-- <image src="/static/images/user-bg.png" class="bg"></image> -->
            <view style="position: relative">
                <uv-navbar title="个人中心" bgColor="rgba(0,0,0,0)" placeholder="true"></uv-navbar>
                <view style="height: 30rpx"></view>
                <view class="userinfo">
                    <view class="userinfo__avatar">
                        <image :src="userinfo.avatar"></image>
                    </view>
                    <view class="userinfo__text">
                        <view class="userinfo__text__name">{{ userinfo.nickname }}</view>
                        <view class="userinfo__text__id">会员卡号：{{ userinfo.code }} <u-icon name="arrow-right" size="13"></u-icon></view>
                    </view>
                    <view class="qrcode" @click="handleJump('UserQrcode')">
                        <image src="/static/images/qrcode.png" />
                    </view>
                </view>
                <view class="member">
                    <image class="member__image" src="/static/images/member-bg.png"></image>
                    <view class="member__money">
                        <view class="member__money__title">钱包余额</view>
                        <view class="member__money__value">{{ userinfo.money }}<text> 元</text></view>
                    </view>
                    <view class="mxbtn" @click="handleJump('MoneyLog')">查看明细></view>
                </view>

                <view class="menu">
                    <uv-cell-group :border="false">
                        <uv-cell icon="/static/images/kefu.png" title="联系客服" :isLink="true" @click="callPhone('15934301810')"></uv-cell>
                        <uv-cell icon="/static/images/tuichu.png" title="退出登录" :isLink="true" :border="false" @click="logout"></uv-cell>
                    </uv-cell-group>
                </view>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { handleJump } from '@/utils/common';
import { callPhone } from '@/utils/common';
import { useAuthStore } from '@/state/modules/auth';
import { Toast } from '@/utils/uniapi/prompt';
const authStore = useAuthStore();

onLoad(() => {});
onShow(() => {
    getUserinfo();
});

const userinfo = reactive({
    avatar: '/static/images/avatar.png',
    nickname: '未登录',
    money: 0,
    code: '',
});
const getUserinfo = () => {
    if (authStore.isLogin) {
        authStore.getUserinfo().then((res) => {
            userinfo.avatar = res.avatar;
            userinfo.nickname = res.nickname;
            userinfo.money = res.money;
            userinfo.code = res.code;
        });
    }
};
const logout = () => {
    authStore.loginOut().then(() => {
        Toast('操作成功');
        setTimeout(() => {
            handleJump('Home', {}, true);
        }, 2000);
    });
};
</script>
<style lang="scss" scoped>
.container {
    background-color: #fff;
    .bg {
        position: absolute;
        width: 750rpx;
        height: 494rpx;
    }
    .userinfo {
        display: flex;
        padding: 50rpx;
        position: relative;
        &__avatar {
            image {
                width: 126rpx;
                height: 126rpx;
                border-radius: 50%;
            }
        }
        &__text {
            margin-left: 20rpx;
            padding: 20rpx 0;
            &__name {
                font-size: 28rpx;
                color: #333333;
            }
            &__id {
                display: flex;
                align-items: center;
                margin-top: 20rpx;
                font-size: 24rpx;
                color: #333333;
            }
        }
        .qrcode {
            position: absolute;
            right: 50rpx;
            top: 100rpx;
            image {
                width: 40rpx;
                height: 40rpx;
            }
        }
    }
    .member {
        position: relative;
        &__image {
            width: 750rpx;
            height: 168rpx;
        }
        &__money {
            position: absolute;
            top: 30rpx;
            left: 90rpx;
            &__title {
                font-size: 24rpx;
                font-weight: 400;
                color: #999999;
            }
            &__value {
                margin-top: 10rpx;
                font-size: 46rpx;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #c6b7a5;
                text {
                    color: #999999;
                    font-size: 24rpx;
                    margin-left: 10rpx;
                }
            }
        }
        .mxbtn {
            position: absolute;
            top: 30rpx;
            right: 90rpx;
            font-size: 26rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #999999;
        }
    }
    .menu {
        width: 670rpx;
        margin-left: 40rpx;
        margin-top: 30rpx;
        padding: 20rpx;
        box-shadow: 0 0 20rpx rgba(#000000, 0.1);
        border-radius: 20rpx;
    }
    button::after {
        border: 0;
    }
    .textButton {
        width: 102rpx;
        padding: 0;
        margin: 0;
        background-color: transparent;
        font-size: 26rpx;
        line-height: 26rpx;
    }
}
</style>
